<template>
  <div class="cart-bottom">
    <van-radio-group disabled>
      <van-checkbox v-model="checked" checked-color="#ee0a24"
        >全选</van-checkbox
      >
    </van-radio-group>
    <div class="right">
      <span class="text">
        <span>合计:</span>
        <span class="price">{{ totalPrice }}</span>
      </span>
      <van-button
        type="primary"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        round
        >提交订单
      </van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Radio, RadioGroup, Button } from "vant";

Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Button);

export default {
  name: "",
  data() {
    return {
      checked: true,
    };
  },
  computed: {
    totalPrice() {
      const cartList = this.$store.getters.cartList;
      return cartList
        .filter((item) => {
          return item.checked;
        })
        .reduce((preValue, item) => {
          return preValue + item.count * item.price;
        }, 0)
        .toFixed(2);
    },
  },
};
</script>

<style scoped>
.cart-bottom {
  position: fixed;
  bottom: 50px;
  background-color: #fff;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.van-button {
  height: 40px;
  padding: 0 20px;
}

.text {
  position: absolute;
  left: 155px;
  top: 17px;
}

.text .price {
  color: #ee0a24;
}
</style>